<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="my" uri="myTag/core"%>
<!DOCTYPE html>
<html>
	<head>
		<title>问卷调查</title>
		<%
		String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; 
		%>
		<base href="<%=basePath%>">
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-control" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link href="script/home/css/bootstrap.min.css" rel="stylesheet">
		<link href="script/home/css/font-awesome.min.css" rel="stylesheet">
		<link href="script/home/css/animate.min.css" rel="stylesheet">
		<link href="script/home/css/prettyPhoto.css" rel="stylesheet">
		<link href="script/home/css/main.css" rel="stylesheet">
		<link href="script/home/css/responsive.css" rel="stylesheet">
		<!--[if lt IE 9]>
		<script src="script/home/js/html5shiv.js"></script>
		<script src="script/home/js/respond.min.js"></script>
		<![endif]-->       
		<link rel="shortcut icon" href="script/home/script/home/images/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="script/home/script/home/images/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="script/home/script/home/images/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="script/home/script/home/images/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="script/home/script/home/images/ico/apple-touch-icon-57-precomposed.png">
		
		<script src="script/home/js/jquery.js"></script>
		<script src="script/home/js/bootstrap.min.js"></script>
		<script src="script/bootstrapValidator/js/bootstrapValidator.min.js"></script>
		<script src="script/bootstrapValidator/js/language/zh_CN.js"></script>
		<script src="script/home/js/jquery.prettyPhoto.js"></script>
		<script src="script/home/js/jquery.isotope.min.js"></script>
		<script src="script/home/js/main.js"></script>
		<script src="script/home/js/wow.min.js"></script>
		<script src="script/home/js/bootstrap-paginator.min.js"></script>
		
		<script src="script/chart/echarts/echarts.min.js"></script>
	</head>
	<body>
		<div class="navbar navbar-inverse affix" style="width: 100%;height: 40px; z-index: 999999;padding: 0px;color: white;font-weight: bold;font-size: 14px;" >
			<table style="width: 100%;height: 100%;">
				<tr>
					<td style="width: 20%;"></td>
					<td style="width: 50%;text-align: center;font-size: 30px;">${survey.name }</td>
					<td id="remainingTd" style="width: 30%;text-align: right;">
						&nbsp;&nbsp;
					</td>
				</tr>
			</table>
		</div>
		<div class="container" style="padding-top: 70px;">
			<div class="row">
				<div class="col-md-10 col-lg-10">
					<c:forEach var="paperQuestionEx" items="${paperQuestionExList[0].subList }" varStatus="s1">
					<div class="row">
						<div class="col-md-12 col-lg-12">
							<div class="panel panel-default">
								<div id="section-${s1.index }" class="panel-heading">
									${paperQuestionEx.name }
								</div>
								<c:if test="${!empty paperQuestionEx.description }">
								<div class="panel-body">
									<p>${paperQuestionEx.description }</p>
								</div>
								</c:if>
								<ul class="list-group">
									<c:forEach var="subPaperQuestionEx" items="${paperQuestionEx.subList }" varStatus="s2">
									<c:set var="q" value="${subPaperQuestionEx.questionEx }"></c:set>
									<li class="list-group-item">
										<%-- 题干 --%>
										<input type="hidden" name="paperQuestionIds" value="${subPaperQuestionEx.id }">
										<span style="vertical-align: top; ">${s2.count}：</span>
										<span style="display: inline-block;">${q.title }</span>
										<br/>
										<%-- 如果是单选竖向 --%>
										<c:if test="${q.type == '1' }">
										<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
										<div class="radio">
											<label>
												<input type="radio" name="q${q.id}" value="${dictMap[s3.count] }" 
													onclick="updateChoiceAnswer('q${q.id}')">
												${dictMap[s3.count] }：${row.name }
											</label>
										</div>
										</c:forEach>
										</c:if>
										<%-- 如果是单选横向 --%>
										<c:if test="${q.type == '2' }">
										<div>
											<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
											<label class="radio-inline">
												<input type="radio" name="q${q.id}" value="${dictMap[s3.count] }" 
													onclick="updateChoiceAnswer('q${q.id}')">
												${dictMap[s3.count] }：${row.name }
											</label>
											</c:forEach>
										</div>
										</c:if>
										<%-- 如果是单选行列式 --%>
										<c:if test="${q.type == '3' }">
										<table class="table table-bordered">
											<thead>
												<tr>
													<th></th>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s3">
													<th>${col.name }</th>
													</c:forEach>
												</tr>
											</thead>
											<tbody>
												<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
												<tr>
													<td>${row.name }</td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s4">
													<td>
														<input type="radio" name="q${q.id}_${s3.count }" value="${dictMap[s3.count] }${dictMap[s4.count] }"
																onclick="updateChoiceAnswer2('q${q.id}_${s3.count }')">
													</td>
													</c:forEach>
												</tr>
												</c:forEach>
											</tbody>
										</table>
										</c:if>
										<%-- 如果是多选竖向 --%>
										<c:if test="${q.type == '4' }">
										<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
										<div class="radio">
											<div class="checkbox">
												<label>
													<input type="checkbox" name="q${q.id}" value="${dictMap[s3.count] }"
														onclick="updateChoiceAnswer('q${q.id}')">
													${dictMap[s3.count] }：${row.name }
												</label>
											</div>
										</div>
										</c:forEach>
										</c:if>
										<%-- 如果是多选横向 --%>
										<c:if test="${q.type == '5' }">
										<div>
										<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
											<label class="checkbox-inline">
												<input type="checkbox" name="q${q.id}" value="${dictMap[s3.count] }"
														onclick="updateChoiceAnswer('q${q.id}')">
												${dictMap[s3.count] }：${row.name }
											</label>
										</c:forEach>
										</div>
										</c:if>
										<%-- 如果是多选行列式 --%>
										<c:if test="${q.type == '6' }">
										<table class="table table-bordered">
											<thead>
												<tr>
													<th></th>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s3">
													<th>${col.name }</th>
													</c:forEach>
												</tr>
											</thead>
											<tbody>
												<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
												<tr>
													<td>${row.name }</td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s4">
													<th>
														<input type="checkbox" name="q${q.id}" value="${dictMap[s3.count] }${dictMap[s4.count] }"
																onclick="updateChoiceAnswer('q${q.id}')">
													</th>
													</c:forEach>
												</tr>
												</c:forEach>
											</tbody>
										</table>
										</c:if>
										<%-- 如果是下拉列表；不用onchange，如提交失败，再次点击时应该提交 --%>
										<c:if test="${q.type == '7' }">
										<select name="q${q.id}" onclick="updateSelectAnswer('q${q.id}')" class="form-control">
											<option value="">请选择</option>
											<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
											<option value="${dictMap[s3.count] }">${row.name }</option>
											</c:forEach>
										</select>
										</c:if>
										<%-- 如果是下拉列表行列式；不用onchange，如提交失败，再次点击时应该提交 --%>
										<c:if test="${q.type == '8' }">
										<table class="table table-bordered">
											<thead>
												<tr>
													<td></td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s3">
													<th>${col.name }</th>
													</c:forEach>
												</tr>
											</thead>
											<tbody>
												<c:forEach var="row" items="${q.rowOptionList }" varStatus="s3">
												<tr>
													<td>${row.name }</td>
													<c:forEach var="col" items="${q.colOptionList }" varStatus="s4">
													<th>
														<select name="q${q.id}" onclick="updateSelectAnswer('q${q.id}')" class="form-control">
															<option value="">请选择</option>
															<c:forEach var="select" items="${q.selectOptionList }" varStatus="s5">
															<option value="${dictMap[s3.count] }${dictMap[s4.count] }${dictMap[s5.count] }">${select.name }</option>
															</c:forEach>
														</select>
													</th>
													</c:forEach>
												</tr>
												</c:forEach>
											</tbody>
										</table>
										</c:if>
										<%-- 如果是输入框 --%>
										<c:if test="${q.type == '9' }">
										<input type="text" name="q${q.id}" placeholder="文本输入" onblur="updateInputAnswer('q${q.id }')" class="form-control">
										</c:if>
										<%-- 如果是文本框 --%>
										<c:if test="${q.type == '10' }">
										<textarea name="q${q.id}" placeholder="文本输入" class="form-control" rows="3"  onblur="updateTextareaAnswer('q${q.id }')"></textarea>
										</c:if>
									</li>
									</c:forEach>
								</ul>
							</div>
						</div>
					</div>
					</c:forEach>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//页面加载完毕，执行如下方法：
		$(function() {
			
		});
	</script>
</html>